<template>
  <div>
    <el-form  :inline="true" :model="dataForm" >
      <el-form-item label="姓名:">
        <el-input v-model="dataForm.userName"  placeholder="请输入真实姓名" clearable/>
      </el-form-item>
      <el-form-item prop="deptId" label="部门" label-width="50px">
        <el-cascader
          placeholder="点击选择部门"
          :options="deptList"
          v-model="dataForm.deptId"
          :props="deptListTreeProps"
          filterable
          clearable
          change-on-select
        />
      </el-form-item>
      <el-form-item label="身份证号:">
        <el-input  v-model="dataForm.idCard"   placeholder="请输入身份证号" clearable/>
      </el-form-item>
      <el-button type="primary" @click="getDataList()">查询</el-button>
      <el-button type="primary" @click="_addDetail()">新增</el-button>
      <el-button type="primary" @click="isdeleteHandle()">批量删除</el-button>
      <el-button type="primary" @click="_export()">导出</el-button>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column  type="selection" header-align="center" align="center" width="50"/>
      <el-table-column label="姓名" prop="userName" align="center" />
      <el-table-column label="部门" prop="deptName" align="center" />
      <el-table-column label="身份证号 " prop="idCard" align="center" />
      <el-table-column label="违章时间" prop="breakRuleTime" align="center" />
      <el-table-column label="违章原因" prop="reason" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div style="width: 150px">{{ scope.row.reason }}</div>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">违章原因</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="结果" prop="result" align="center" />
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="_addDetail(scope.row.id)">修改</el-button>
          <el-button type="text" @click="isdeleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="dataForm.page"
      :page-sizes="[10, 20, 50]"
      :page-size="dataForm.limit"
      :total="dataForm.totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <user-detail-violations ref="userDetailViolations" @refreshDataList="getDataList"></user-detail-violations>
  </div>
</template>

<script>
  import UserDetailViolations from './user-detail-violations'
  import {treeDataTranslate} from '@/utils'

  export default {
    name: 'user-violations',
    data() {
      return {
        dataListLoading: false,
        dataForm: {
          userName: '',
          page: 1,
          limit: 10,
          totalPage: 0,
          deptId: '',
          idCard: ''
        },
        deptList: [], // 部门
        deptListTreeProps: {
          checkStrictly: true,
          expandTrigger: 'click',
          label: 'name',
          value: 'id',
          children: 'children',
          emitPath: false
        },
        dataList: [],
        dataListSelections: []
      }
    },
    components: {
      UserDetailViolations
    },
    mounted() {
      this.$http({
        url: this.$http.adornUrl('/usercenter-admin/dept/list'),
        method: 'post'
      }).then(res => {
        this.deptList = treeDataTranslate(
          res.data.filter(item => item.parentId !== -1),
          'id'
        )
      })
      this.getDataList()
    },
    methods: {
      _add() {
        this.$nextTick(() => {
          this.$refs.userAddViolations.init()
        })
      },
      _addDetail(id) {
        this.$nextTick(() => {
          this.$refs.userDetailViolations.init(id)
        })
      },
      async getDataList() {
        let res = await this.$http.post('/usercenter-admin/breakRule/breakRuleInfos', {
          'page': this.dataForm.page,
          'limit': this.dataForm.limit,
          'userName': this.dataForm.userName,
          'deptId': this.dataForm.deptId,
          'idCard': this.dataForm.idCard
        })
        this.dataForm.totalPage = res.data.totalCount
        this.dataForm.limit = res.data.pageSize
        this.dataForm.page = res.data.currPage
        this.dataList = res.data.list
      },
      _export() {
        window.location = this.$http.downloadUrl(
          '/usercenter-admin/breakRule/exportBreakRuleInfos',
          {
            courseId: this.courseId,
            courseStatus: this.dataForm.courseStatus
          }
        )
      },
      // 每页数
      sizeChangeHandle(val) {
        this.dataForm.limit = val
        this.dataForm.page = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.dataForm.page = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      async isdeleteHandle(id) {
        var ids = id || this.dataListSelections.map(item => item.id).join(',')
        var confirm = await this.$confirm(`确定要进行删除操作吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (confirm !== 'confirm') return

        let res = await this.$http({
          url: '/usercenter-admin/breakRule/batDelete',
          method: 'post',
          data: {
            ids: ids
          }
        })
        if (res && res.code === 200) {
          this.$notify.success({ title: '成功', message: '操作成功' })
          this.pageIndex > 1 && this.dataList.length <= 1 && this.pageIndex --
          this.getDataList()
          this.dataForm.page > 1 && this.dataList.length <= 1 && this.dataForm.page --
        } else {
          this.$notify.error({ title: '错误', message: res.msg })
        }
      }
    }
  }
</script>

<style scoped>

</style>
